<template>
  <div class="home">
    <h4>count:{{$store.state.count}}</h4>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="sendParams">点击传递参数</button>
    <button @click="sendParams1">点击传递参数1</button>
    <p>数据：{{$store.state.obj}}</p>
    <button @click="numberChange">修改number</button>
    <button @click="testMutation">测试mutation</button>
    <button @click="testAync">测试异步代码</button>
    <button @click="testAction">测试Action</button>
    <p>sNum:{{$store.state.sNum}}</p>
    <button @click="testModuleA">测试moduleA</button>
    <p>username:{{$store.state.moduleA.username}}</p>
  </div>
</template>

<script>
import { TEST_MUTATION, TEST_AYNC, TEST_ACTION, TEST_MODULEA } from '../../mutation-types'
export default {
  name: 'Home',
  components: {

  },
  data () {
    return {

    };
  },
  computed: {

  },
  created () {

  },
  mounted () {

  },
  methods: {
    increment () {
      this.$store.commit('increment')
    },
    decrement () {
      this.$store.commit('decrement')
    },
    sendParams () {
      this.$store.commit('getParams', { title: '标题' })
    },
    sendParams1 () {
      this.$store.commit({
        type: 'getParams1',
        title: 'message1'
      })
    },
    numberChange () {
      this.$store.commit({
        type: 'numberChange',
        num: 20
      })
    },
    testMutation () {
      this.$store.commit(TEST_MUTATION, { testname: 'cuifan', age: 20 })
    },
    testAync () {
      this.$store.commit(TEST_AYNC, { testname: 'simon', sNumber: 20 })
    },
    testAction () {
      this.$store.dispatch(TEST_ACTION, { testname: 'simon27', sNumber: 20 }).then((data) => {
        console.log(data);
        console.log('代码执行成功');
      })
    },
    testModuleA () {
      // 测试目标=> 把username异步修改为‘simon’
      this.$store.dispatch(TEST_MODULEA, { uname: 'TEST_MODULEA', age: 99 })
    }
  },
};
</script>

<style scoped>
</style>
